<script setup lang="ts">
const form=reactive({
  limit:10,
  page:1,
});
const totalPage=ref(1);
const {data:list,refresh}=await useServerGet('/fp/getDomainGoodsList',form)
const change=(index)=>{
  form.page=index+1;
  refresh&&refresh();
}
watchEffect(()=>{
  totalPage.value=Math.ceil(list.value.data?.count/form.limit)||1;
})
</script>

<template>
<div class="mx-auto">
  <div class="w-[1200px] mx-auto">
    <div class="text-center mt-10 text-[36px]">海量一口价域名</div>
    <div class="text-center mt-5 mb-12 text-base text-[#808080]">方便快捷，省时省心</div>
    <div class="grid grid-cols-4 gap-3 grid-rows-3 h-[410px]">
      <div class="active active-more text-[var(--el-color-primary)] px-5 relative row-span-3">
        <div class="text-center text-[29px] font-bold mt-[50px]">一口价域名</div>
        <div class="text-center text-base w-[176px] mx-auto mt-7">海量一口价域名在售资源 无需其他交涉可立即下单 方便快捷，省时省心</div>
        <div class="h-[47px] text-center text-white submit absolute bottom-5 left-2.5 right-2.5" ><NuxtLink to="/allDomainActive.html">查看更多</NuxtLink></div>
      </div>
      <el-carousel height="410px" class="col-span-3 row-span-3" :interval="5000" >
        <el-carousel-item v-for="item in totalPage" :key="item">
          <div class="grid grid-cols-3 gap-3">
            <NuxtLink v-for="item in list?.data?.list??[]" :to="`/once.html?name=${item.domain}`">
              <div class="p-8 rounded-[20px] bg-white active" >
                <div>{{ item.domain }}</div>
                <div class="flex items-baseline text-[#FE5643]"><span class="text-sm">¥</span><span class="text-[28px] pr-4 pl-0.5">{{ item.price }}</span><div class="w-[58px] h-[25px]"><img
                    src="~/assets/imgs/one-price.png" alt=""></div></div>
              </div>
            </NuxtLink>

          </div>
        </el-carousel-item>
      </el-carousel>

    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.space-border{
  border-right: 1px solid var(--el-border-color);
}
.submit{
  line-height: 47px;
  background-image: url("~/assets/imgs/submit.png");
  background-size: 100% 100%;
}
:hover.active{
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09);
  transition: all 0.3s;
  transform: scale(1.01);
}
.active-more{
  background-image: url("/imgs/activeMore.jpg");
  background-size: 100% 100%;
}
</style>